import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { STATETYPE } from '../../type/store.d'
import { NavBar, ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons';


function Details() {
    interface LOSTATE {
        state: STATETYPE
    }
    const navigate = useNavigate()
    const location = useLocation() as LOSTATE
    const goback = () => {
        navigate(-1)
    }
    return (
        <div className='detail'>
            <NavBar
                title="详情页"
                leftText="返回"
                rightText="按钮"
                onClickLeft={goback}
            />
            <p><img src={location.state.img} alt="" /></p>
            <p>{location.state.txt}</p>
            <p>价格：￥{location.state.price}</p>
            <p>月销量：{location.state.num}</p>
            <ActionBar>
                <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
                <ActionBar.Icon icon={<CartO />} badge={{ content: 5 }} text="购物车" />
                <ActionBar.Icon icon={<ShopO />} badge={{ content: 12 }} text="店铺" />
                <ActionBar.Button type="warning" text="加入购物车" />
                <ActionBar.Button type="danger" text="立即购买" />
            </ActionBar>
        </div>
    )
}

export default Details